<template>
    <!-- 使用vue-cropper进行图片裁剪 -->
    <div style="width: 100%; height: 100%;">
        <el-row style="width: 100%; height: 100%;">
            <vueCropper style="width: 100%; height: 100%;" ref="cropper" :img="option.img" :outputSize="option.outputSize"
                :outputType="option.outputType" :info="option.info" :canScale="option.canScale" :autoCrop="option.autoCrop"
                :autoCropWidth="option.autoCropWidth" :autoCropHeight="option.autoCropHeight" :fixedBox="option.fixedBox"
                :fixed="option.fixed" :fixedNumber="option.fixedNumber" :canMove="option.canMove"
                :canMoveBox="option.canMoveBox" :original="option.original" :centerBox="option.centerBox"
                :infoTrue="option.infoTrue" :full="option.full" :enlarge="option.enlarge" :mode="option.mode">
            </vueCropper>
        </el-row>
        <el-row style="width: 100%; height: 60px; margin-top: 10px;">
            <!-- 注意这里的action=""和 :auto-upload="false"，我把自动上传关了，免得点击上传图片的时候发送一次请求 -->
            <el-upload v-model:file-list="fileList" action="" :auto-upload="false" :show-file-list="false"
                :on-change="handleChange">
                <el-button type="primary">点击上传图片</el-button>
            </el-upload>
            <el-button type="primary" plain @click="rotateLeft">《=向左旋转图片</el-button>
            <el-button type="primary" plain @click="rotateRight">向有旋转图片=》</el-button>
            <el-button type="primary" @click="getCropDataBase64">获取截取的图片</el-button>
        </el-row>

        <hr>
        <div>
            展示截图的图片
        </div>
        <div style="width: 300px; height: 500px;">
            <!-- 若图片只设置宽度，可以保持等比例展示图片 -->
            <img :src="imgUrl" style="width: 100%;">
        </div>
    </div>
</template>

<script setup lang="ts">
import vueCropper from './VueCropper.ts'
import { ref, reactive } from 'vue';
// import { ElMessage, ElMessageBox } from 'element-plus'
import type { UploadProps, UploadFile } from 'element-plus'

const cropper = ref()
let option = reactive({
    img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202007%2F20%2F20200720114755_irujx.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1705165157&t=aa2bae86275e77bc7b461ee2e7d1ec7c', // 裁剪图片的地址 url 地址, base64, blob
    outputSize: 1, // 裁剪生成图片的质量
    outputType: 'jpeg', // 裁剪生成图片的格式 jpeg, png, webp
    info: true, // 裁剪框的大小信息
    canScale: false, // 图片是否允许滚轮缩放
    autoCrop: true, // 是否默认生成截图框
    autoCropWidth: 150, // 默认生成截图框宽度
    autoCropHeight: 150, // 默认生成截图框高度
    fixedBox: false, // 固定截图框大小 不允许改变
    fixed: false, // 是否开启截图框宽高固定比例，这个如果设置为true，截图框会是固定比例缩放的，如果设置为false，则截图框的狂宽高比例就不固定了
    fixedNumber: [1, 1], // 截图框的宽高比例 [ 宽度 , 高度 ]
    canMove: true, // 上传图片是否可以移动
    canMoveBox: true, // 截图框能否拖动
    original: false, // 上传图片按照原始比例渲染
    centerBox: true, // 截图框是否被限制在图片里面
    infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
    full: true, // 是否输出原图比例的截图
    enlarge: '1', // 图片根据截图框输出比例倍数
    mode: 'contain' // 图片默认渲染方式 contain , cover, 100px, 100% auto
})

// 向左旋转图片
const rotateLeft = () => {
    // 这个默认是旋转90度的，官网有说明
    // 后面会完善不要让这个一下子旋转90度的代码
    cropper.value.rotateLeft()
}

// 向右旋转
const rotateRight = () => {
    // 这个默认也是旋转90度的，官网有说明
    // 后面会完善不要让这个一下子旋转90度的代码
    cropper.value.rotateRight()
}

// 获取图片
const getCropDataBase64 = () => {
    // 这个是获取base64的图片
    cropper.value.getCropData((data: any) => {
        // do something
        // 如这里，可以获取上传base64位的图片给服务器
        // 也可以将base64位的图片转化为file文件，然后通过form表单的形式提交给后端，让后端返回一个图片的访问地址等
        // 这里就简单把截取到的图片展示一下吧，这里就暂时不上传给后端了
        imgUrl.value = data
    })
}

const imgUrl = ref('')

const fileList = ref([])
// el-upload的change事件，具体看element-plus的官网
const handleChange: UploadProps['onChange'] = (
    uploadFile: UploadFile
) => {
    // URL.createObjectURL(uploadFile.raw!)，将图片变成blob的数据，类似于blob:http://127.0.0.1:5173/dbaf505d-df43-4448-809d-8daadf3e883c
    option.img = URL.createObjectURL(uploadFile.raw!)
    console.log('到我这里来', option.img);
}

</script>

<style scoped></style>

